<template>
<div class="tab-position">
  <!-- <div style="margin-bottom: 20px;">
    <el-button size="small" @click="addTab(editableTabsValue2)">
      add tab
    </el-button>
  </div> -->
  <el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
    <el-tab-pane
      v-for="item in editableTabs2"
      :key="item.name"
      :label="item.title"
      :name="item.name" 
    >
      {{item.content}}
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import mesCenter from 'common/mesCenter'

export default {
  name: "eduTab",
  data() {
    return {
      editableTabsValue2: '1',
      editableTabs2: [{
        title: '首页',
        name: '1',
        content: 'Tab 1 content'
      }],
      tabIndex: 1
    }
  },
  methods: {
    sayhello(_this){
      mesCenter.$on('haveTab', function(data) {
        //console.log(_this);
        _this.addTab(data); 
      });
    },
    
    addTab:function(targetName) {
      let newTabName = ++this.tabIndex + '';
      this.editableTabs2.push({
        title: targetName,
        name: newTabName,
        content: 'New Tab content'
      });
      this.editableTabsValue2 = newTabName;
    },
    removeTab(targetName) {
      let tabs = this.editableTabs2;
      let activeName = this.editableTabsValue2;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      
      this.editableTabsValue2 = activeName;
      this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
    }
  },
  created() {
    //console.log(this);
    this.sayhello(this);
  }
  
}
</script>

<style scoped>
.tab-position{
  width: 100%;
  height: 40px;
  background-color: #fff;
  overflow: hidden;
  border-bottom:1px solid #c1c1c1;
}
</style>


